<template>
  <div class="wrap">
    <van-notice-bar
      color="#1989fa"
      scrollable="true"
      background="#ecf9ff"
      left-icon="passed"
    >{{msg}}</van-notice-bar>
    <p class="title">身份信息</p>
    <van-panel>
      <div class="list-item">
        <span class="name">用户名:</span>
        <span v-text="username"></span>
      </div>
      <div class="list-item">
        <span class="name">手机号:</span>
        <span v-text="mobile"></span>
      </div>
      <div class="list-item">
        <span class="name">身份证号:</span>
        <span v-text="idCard"></span>
      </div>
    </van-panel>
    <p class="title">银行卡绑定信息</p>
    <div style="margin-bottom:10px" v-for="(item,index) in cardList" :key="item.cardNo">
      <van-panel>
        <div class="list-item">
          <span class="name" v-text="item.openCardBank+':'"></span>
          <span v-text="item.bankCardNo"></span>
        </div>
        <div class="list-item">
          <span class="name">绑定车队:</span>
          <span v-text="item.logisticsUserName"></span>
        </div>
        <div class="list-item">
          <span class="name">绑定状态:</span>
          <span v-text="item.relationStatus==1?'审核中':(item.relationStatus==2?'已绑定':'拒绝')"></span>
          <span class="apply" v-if="item.relationStatus==3" @click="apply(index)">重新申请</span>
        </div>
        <div slot="footer" style="text-align:right">
          <van-button
            size="small"
            @click="viewBill(index)"
            type="info"
            style="border-radius:4px"
          >查看账单</van-button>
        </div>
      </van-panel>
    </div>
  </div>
</template>
<script>
import { NoticeBar, Panel, Field} from "vant";
import { getData } from "../utils/api";
export default {
  name: "bindSuccess",
  data() {
    return {
      username: sessionStorage.getItem("name"),
      idCard: sessionStorage.getItem("idCard"),
      mobile: sessionStorage.getItem("mobile"),
      cardNo: "6217 0022 7000 9206 666",
      car: "A车队",
      bindStatus: "已绑定",
      cardList: [],
      msg: `${sessionStorage.getItem("name")}，您好！您的信息已绑定成功`
    };
  },
  mounted() {
    getData({
      method: "getShortDriver",
      dataBody: {
        name: this.username,
        idCardNo: this.idCard,
        companyId: sessionStorage.getItem("companyId")
      }
    }).then(res => {
      if (res.data.result.code == 0) {
        this.cardList = res.data.result.data.relations;
      } else {
        if (res.data.result.msg == "请求数据丢失，请重新登陆") {
          alert( res.data.result.msg)
            this.$router.push({ path: "/" });
        } else {
          alert(res.data.result.msg);
        }
      }
    });
  },
  methods: {
    viewBill(index) {
      sessionStorage.setItem("bankNo", this.cardList[index].bankCardNo);
      this.$router.push({ path: "/myBill" });
    },
    apply(index) {
      sessionStorage.setItem("againBank", this.cardList[index].openCardBank);
      sessionStorage.setItem("againBankNum", this.cardList[index].bankCardNo);
      sessionStorage.setItem(
        "againBankAddress",
        this.cardList[index].openCardBankName
      );
      this.$router.push({ path: "/applyAgain" });
    }
  }
};
</script>
<style scoped>
.wrap {
  touch-action: none;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  background-color: rgb(248, 248, 248);
}
.van-panel__header {
  padding: 0;
}
.title {
  padding: 10px 16px;
  color: #323233;
  font-size: 14px;
  margin: 0;
  color: rgba(69, 90, 100, 0.6);
}
.list-item {
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  height: 24px;
  padding: 10px 0px;
  margin-left: 16px;
  border-bottom: 1px solid #f4f4f4;
}
.name {
  display: inline-block;
  width: 90px;
}
.apply {
  float: right;
  margin-right: 16px;
  font-size: 14px;
  color: #323233;
  color: rgb(25, 137, 250);
}
</style>